<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>订单管理</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.css}" crossorigin="anonymous">
    <script th:src="@{js/jquery.js}" charset="UTF-8"></script>
    <script th:src="@{js/popper.js}"></script>
    <script th:src="@{js/bootstrap.js}" charset="UTF-8"></script>
    <script th:src="@{js/sweetalert.min.js}" charset="UTF-8"></script>
    <script th:src="@{js/httpUrl.js}"></script>
</head>
<script th:inline="javascript">
    const sid=[[${sid}]];
    function getLocalTime(nS) {
        //将时间戳转换为看得懂的日期格式
        let date=new Date(nS);
        let Y=date.getFullYear()+'-';
        let M=(date.getMonth()+ 1 < 10 ? '0' + (date.getMonth()+1):date.getMonth()+1)+'-';
        let D=date.getDate()+' ';
        let h=date.getHours()+':';
        let m=date.getMinutes()+':';
        let s=date.getSeconds();
        return Y+M+D+h+m+s;
    }
    function select_order_item(ofid) {
        console.log(ofid);
        let json={
            'ofid': ofid
        }
        $.ajax({
            url: httpUrl+"/selectOrderItemByOfid",
            data: JSON.stringify(json),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset:utf-8",
            success: function(json){
                //console.log(json.toString());
                if(json.toString()===''){
                    swal('没有找到符合的数据!');
                }else{
                    document.getElementById("select_tbody").innerHTML="";
                    $.each(json,function (index){
                        $("#select_tbody").append(
                            "<tr>"+
                            "<td>"+json[index].orderForm.ofid+"</td>"+"<td>"+json[index].com.cid+"</td>"+
                            "<td>"+json[index].com.cname+"</td>"+"<td>"+json[index].num+"</td>"+
                            "<td>"+json[index].price+"</td>"+ "<td>"+json[index].tips+"</td>"+
                            "</tr>"
                        );
                    });
                }
            }
        });
    }
    function select_history() {
        let order_history={
            "ofid": '',
            "uid": '',
            "sid": sid,
            "date": '',
            "price": '',
            "state": 5
        };
        $.ajax({
            url: httpUrl+"/selectOrderByPara",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(order_history),
            contentType: "application/json; charset:utf-8",
            success: function(json){
                console.log(json.toString());
                document.getElementById("tbody").innerHTML="";
                if(json.toString()===''){
                    swal('没有找到符合的数据!');
                }else{
                    $.each(json,function (index){
                        $("#tbody").append(
                            "<tr>" +
                            "<td><button type='button' class='btn btn-link'>"+json[index].ofid+"</button></td>"+"<td>"+json[index].user.uid+"</td>"+
                            "<td>"+json[index].user.uname+"</td>"+"<td>"+json[index].shop.sid+"</td>"+
                            "<td>"+getLocalTime(json[index].date)+"</td>"+
                            "<td>"+json[index].price+"</td>"+ "<td style='color: #fd7e14;'>"+json[index].state.stname+"</td>"+
                            "<td>"+"<button class='btn btn-info' data-toggle='modal' data-target='#select_order_item' onclick='select_order_item("+json[index].ofid+")'>订单详情</button>"+"</td>"+
                            "</tr>"
                        );
                    });
                }
            }
        });
    }
    function select_now(){
        let order_now={
            "ofid": '',
            "uid": '',
            "sid": sid,
            "date": '',
            "price": '',
            "stid": 5
        };
        $.ajax({
            url: httpUrl+"/selectOrderNotFinishByPara",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(order_now),
            contentType: "application/json; charset:utf-8",
            success: function(json){
                console.log(json.toString());
                document.getElementById("tbody").innerHTML="";
                if(json.toString()===''){
                    swal('没有找到符合的数据!');
                }else{
                    $.each(json,function (index){
                        $("#tbody").append(
                            "<tr>" +
                            "<td><button type='button' class='btn btn-link'>"+json[index].ofid+"</button></td>"+"<td>"+json[index].user.uid+"</td>"+
                            "<td>"+json[index].user.uname+"</td>"+"<td>"+json[index].shop.sid+"</td>"+
                            "<td>"+getLocalTime(json[index].date)+"</td>"+
                            "<td>"+json[index].price+"</td>"+ "<td style='color: #fd7e14;'>"+json[index].state.stname+"</td>"+
                            "<td>"+"<button class='btn btn-info' data-toggle='modal' data-target='#select_order_item' onclick='select_order_item("+json[index].ofid+")'>订单详情</button>"+
                            "<button class='btn btn-danger' onclick='Finish("+json[index].ofid+")'>已完成</button>"+"</td>"+
                            "</tr>"
                        );
                    });
                }
            }
        });
    }
    function Finish(ofid) {
        let order={
            "ofid": ofid,
            "uid": '',
            "sid": '',
            "date": '',
            "price": '',
            "stid": 4
        };
        $.ajax({
            url: httpUrl+"/updateOrderStateByOfid",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(order),
            contentType: "application/json; charset:utf-8",
            success: function (json) {
                select_now();
            }
        });
    }
    function EXIT() {
        window.location.href=httpUrl+"/";
    }
    $(select_now());
</script>
<body>
<div class="modal fade" id="select_order_item">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">订单详情</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>订单号</th><th>菜品ID</th><th>菜品名</th><th>数量</th><th>单项总价</th><th>备注</th>
                    </tr>
                    </thead>
                    <tbody id="select_tbody"></tbody>
                </table>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div id="header">
    <span><button class="btn btn-primary" onclick="select_now()">当前进行中订单</button></span>
    <span><button class="btn btn-primary" onclick="select_history()">历史已完成订单</button></span>
</div>
<div id="body">
    <table id="user_table" class="table table-bordered">
        <thead>
        <tr>
            <th>订单号</th><th>用户ID</th><th>用户名</th><th>商店ID</th><th>订单创建日期</th><th>订单总价</th><th>订单状态</th><th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
</div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        margin: 0 auto;
        height: auto;
        width: 100%;
        background-color: #FFFFFF;
    }
    #header{
        width: 100%;
        height: 70px;
        position: relative;
    }
</style>
</html>
